<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-07-02 10:32:21
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-07-02 10:35:45
 * @FilePath: /XMate-h5/src/views/myXmate/myTeam/components/cardHead.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex flex-col gap-4 mb-1">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <div class="w-[5px] h-[20px] rounded-[3px] bg-yxt-blue mr-4"></div>
        <span class="font-bold text-lg">{{ title }}</span>
      </div>

      <div class="flex items-center gap-5 pr-4">
        <template v-for="(filter, idx) in filters" :key="idx">
          <van-popover
            v-if="filter.options?.length > 0"
            placement="bottom-end"
            :actions="filter.options"
            @select="(action) => onSelect(action, idx)"
          >
            <template #reference>
              <div :class="`flex items-center cursor-pointer text-sm`">
                <p>{{ filter.value?.text || filter.text }}</p>
                <van-icon size="12" name="arrow-down" color="#595959" class="ml-1" />
              </div>
            </template>
          </van-popover>

          <div
            v-else
            class="flex items-center cursor-pointer text-sm"
            @click="filter.customAction?.()"
          >
            <p>{{ filter.text }}</p>
            <van-icon size="12" name="arrow-down" color="#595959" class="ml-1" />
          </div>
        </template>
      </div>
    </div>

    <slot />
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, PropType } from "vue";
import { FilterItem } from "./cardHead";


const emits = defineEmits(["onSelect"]);

const props = defineProps({
  title: String,
  filters: {
    type: Array as PropType<FilterItem[]>,
    default: () => []
  }
});

const onSelect = (action: any, idx: number) => {
  console.log("onSelect", action);
  const filterItem: FilterItem = props.filters[idx];
  filterItem.text = action.text;
  filterItem.value = action.value;
  emits("onSelect", filterItem);
};
</script>
